<template>
	<div>
		<!--	轮播图区域	-->
		<mt-swipe :auto="4000">
			<mt-swipe-item>
				<img src="../../images/7.jpg" alt="">
			</mt-swipe-item>
			<mt-swipe-item>
				<img src="../../images/11.jpg" alt="">
			</mt-swipe-item>
			<mt-swipe-item>
				<img src="../../images/29.jpg" alt="">
			</mt-swipe-item>
		</mt-swipe>

		<!--	九宫格到六宫格的改造工程	-->
		<ul class="mui-table-view mui-grid-view mui-grid-9">
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/newlist">
				<span class="mui-icon mui-icon-home"></span>
				<div class="mui-media-body">新闻资讯</div>
			</router-link></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="">
				<span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
				<div class="mui-media-body">图片分享</div>
			</router-link></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="">
				<span class="mui-icon mui-icon-chatbubble"></span>
				<div class="mui-media-body">商品购买</div>
			</router-link></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="">
				<span class="mui-icon mui-icon-location"></span>
				<div class="mui-media-body">留言反馈</div>
			</router-link></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="">
				<span class="mui-icon mui-icon-search"></span>
				<div class="mui-media-body">视频专区</div>
			</router-link></li>
			<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="">
				<span class="mui-icon mui-icon-phone"></span>
				<div class="mui-media-body">联系我们</div>
			</router-link></li>
		</ul>
	</div>
</template>

<script>
export default {
	name: "home",
	data() {
		return {}
	},
	created() {
		// this.getLunBoTuList();
	},
	methods: {
		getLunBoTuList() {
			this.$http.get('api/test').then(result => {
				console.log(result.body);
			})
		}
	}
}
</script>

<style scoped>
	.mint-swipe {
		height: 200px;
	}

	.mui-grid-view.mui-grid-9 {
		background-color: #ffffff;

	}


	.mui-grid-view.mui-grid-9 .mui-table-view-cell {
		border: 0;
	}

	.mint-swipe-item:nth-child(1) {
		background-color: #08d578;
	}

	.mint-swipe-item:nth-child(2) {
		background-color: black;
	}

	.mint-swipe-item:nth-child(3) {
		background-color: skyblue;
	}

	img {
		width: 100%;
	}

</style>